<template>
	<view class="rexiao_view">
		<view class="back_img">
			<img :src="gIndexImage.img" alt="" style="width:100%;height:400px;" srcset="" />
		</view>
		
		<view class="">
			<up-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss"></up-count-down>	
		</view>
		<view class="listLimited">
			<view class="Limited_item" v-for="(item,index) in listLimited.List" :key="index">
				<view class="view_img">
					<img :src="item.image" alt="" style="width:140px;height:140px;" srcset="" />
				</view>
				<view class="view_cent">
					<p class="goods_name">{{item.name}}</p>
					<p class="price_span">{{item.category}}</p>
					<p class="price_span">已售卖{{item.orderNum}}</p>
					<p class="price_span">
						<span class="span2">
							￥{{item.price}}{{item.unit}}
						</span>
					</p>
					<p>
						<button class="bg-primary text-lg text-white p_buttom"  
						@click="goPage(`/pages/goods/index?id=${item.id}`)"
						>
							去购买
						</button>
					</p>
				</view> 
			</view>

		</view>
	</view>
</template>

<script lang="ts" setup>
	import { getgetIndexImage } from '@/api/shop'
	import { gethotList } from '@/api/goods'


	import { reactive, shallowRef, defineComponent, onMounted, ref } from 'vue'
	import { onLoad, onUnload, onShareAppMessage, onPageScroll } from '@dcloudio/uni-app'
	const baseUrl = `${import.meta.env.VITE_APP_BASE_URL || ''}/`
	const gIndexImage = reactive<{ img : string }>({
		img: "https://mzd-admin.muzhandao.com/api/uploads/image/20240507/39c7c9c7-e24c-4eae-8a46-2a33ed6c0a50.png"
	})
	const listLimited = reactive<{ List : [] }>({
		List: []
	})


	onLoad(() => {
		getgetIndexImage(4).then(res => {
			console.log(res, 'res');
			gIndexImage.img = baseUrl + "api/uploads/" + res
		});
		gethotList({pageNo:1,pageSize:10}).then(res => {
			console.log(res, res.lists, 'res11111111');
			listLimited.List = res.lists
		})
	})
	
	const goPage = (url: string) => {
	    uni.navigateTo({ url: url })
	}
</script>

<style lang="scss" scoped>
	.rexiao_view{
		background: #a998c8;
	}
	.Limited_item {
		display: flex;
		background:#e1d7ec ;
		margin: 5px;
		margin-bottom: 20px;
		padding: 14px;
		border-radius:10px ;

		.view_img {
			flex: 1;
			width: 140px;
		}

		.view_cent {
			flex: 2;

			padding-left: 10px;

			.goods_name {
				font-size: 20px;
				font-weight: 700;
			}

			.price_span {
				margin-top: 10px;
				.span1 { 
					font-size: 14px;
					font-weight: 700;
					color: red;
				}

				.span2 {
					font-size: 14px;
					font-weight: 700;
					color: red;
				}
 
			}
			.p_buttom{
				width: 100px;
				margin-right: 0px;
				margin-top: -25px;
			}
		}
	}
</style>